<template>
  <div class="app-container">
    <el-card shadow="never" border="none">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :inline="true"
        style="width: 700px"
        label-position="left"
      >
        <div class="work-info">
          <p class="work-info-p">工作时间处理规则</p>
          <!-- <el-divider content-position="left">工作时间处理规则</el-divider> -->
          <el-row>
            <el-col :span="12">
              <el-form-item prop="workStartDay" style="width: 90px">
                <el-select
                  v-model="formData.workStartDay"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in dictionaryStore.filterDictList('Week')"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                prop="workEndDay"
                style="width: 120px"
                label="至"
                label-width="26px"
              >
                <el-select
                  v-model="formData.workEndDay"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in dictionaryStore.filterDictList('Week')"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="workStartTime"
                style="width: 130px"
                label="从"
                label-width="26px"
              >
                <el-time-picker
                  v-model="formData.workStartTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item
                prop="workEndTime"
                style="width: 130px"
                label="到"
                label-width="26px"
              >
                <el-time-picker
                  v-model="formData.workEndTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                prop="workFirstTimeout"
                style="width: 220px"
                label="首次处理超时时间"
                label-width="130px"
              >
                <el-input v-model="formData.workFirstTimeout" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="workUpgradeTime"
                style="width: 200px"
                label="工单升级时间"
                label-width="106px"
              >
                <el-input v-model="formData.workUpgradeTime" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-divider border-style="dashed" />
        <div class="work-info">
          <p class="work-info-p">休息时间处理规则</p>
          <!-- <el-divider content-position="left">休息时间处理规则</el-divider> -->
          <el-row>
            <el-col :span="12">
              <el-form-item prop="restStartDay" style="width: 90px">
                <el-select
                  v-model="formData.restStartDay"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in dictionaryStore.filterDictList('Week')"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                prop="restEndDay"
                style="width: 120px"
                label="至"
                label-width="26px"
              >
                <el-select
                  v-model="formData.restEndDay"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in dictionaryStore.filterDictList('Week')"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="restStartTime"
                style="width: 130px"
                label="从"
                label-width="26px"
              >
                <el-time-picker
                  v-model="formData.restStartTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item
                prop="restEndTime"
                style="width: 156px"
                label="到次日"
                label-width="56px"
              >
                <el-time-picker
                  v-model="formData.restEndTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                prop="restFirstTimeout"
                style="width: 220px"
                label="首次处理超时时间"
                label-width="130px"
              >
                <el-input v-model="formData.restFirstTimeout" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="restUpgradeTime"
                style="width: 200px"
                label="工单升级时间"
                label-width="106px"
              >
                <el-input v-model="formData.restUpgradeTime" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-divider border-style="dashed" />
        <div class="work-info">
          <!-- <el-divider content-position="left">法定节假日处理规则</el-divider> -->
          <p class="work-info-p">法定节假日处理规则</p>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="festivalStartTime"
                style="width: 230px"
                label="从最后一个工作日"
                label-width="130px"
              >
                <el-time-picker
                  v-model="formData.festivalStartTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item
                prop="festivalEndTime"
                style="width: 200px"
                label="到首个上班日"
                label-width="100px"
              >
                <el-time-picker
                  v-model="formData.festivalEndTime"
                  placeholder="请选择"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                prop="festivalFirstTimeout"
                style="width: 231px"
                :label="`首个工作日${formData.festivalEndTime || '--'}起`"
                label-width="132px"
              >
                <el-input v-model="formData.festivalFirstTimeout" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="festivalUpgradeTime"
                style="width: 200px"
                label="工单升级时间"
                label-width="106px"
              >
                <el-input v-model="formData.festivalUpgradeTime" clearable>
                  <template #suffix> 小时 </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-row
          style="
            max-width: 700px;
            display: flex;
            justify-content: flex-start;
            margin: 20px 0 20px;
          "
        >
          <el-button
            v-if="authAllPerm([`${props.type}:clgz:edit`])"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="getData">取 消</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { RootObject } from "@/views/psm/common/index";
import { validateNumberCanNot } from "@/utils/commonHooks";
import { authAllPerm } from "@/utils/index";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "CommonRuleSetting",
  inheritAttrs: false,
});

const props = defineProps({
  type: {
    type: String,
    default: () => {
      return "psm";
    },
  },
});

const loading = ref<boolean>(false);
const formRef = ref();

function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      await request({
        url: `/dmpDosPcm/psmworkorderrule/save/${props.type}`,
        method: "post",
        data: formData,
      })
        .then(async () => {
          loading.value = false;
          ElMessage.success("修改成功");
          await getData();
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      ElMessage.error("请完善信息");
    }
  });
}

const rules = reactive<any>({
  workStartDay: [{ required: true, message: "", trigger: "change" }],
  workEndDay: [{ required: true, message: "", trigger: "change" }],
  workStartTime: [{ required: true, message: "", trigger: "change" }],
  workEndTime: [{ required: true, message: "", trigger: "change" }],
  workFirstTimeout: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],
  workUpgradeTime: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],

  restStartDay: [{ required: true, message: "", trigger: "change" }],
  restEndDay: [{ required: true, message: "", trigger: "change" }],
  restStartTime: [{ required: true, message: "", trigger: "change" }],
  restEndTime: [{ required: true, message: "", trigger: "change" }],
  restFirstTimeout: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],
  restUpgradeTime: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],

  festivalStartTime: [{ required: true, message: "", trigger: "change" }],
  festivalEndTime: [{ required: true, message: "", trigger: "change" }],
  festivalFirstTimeout: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],
  festivalUpgradeTime: [
    { required: true, message: "", trigger: "blur" },
    {
      validator: validateNumberCanNot,
      trigger: "blur",
    },
  ],
});

const getData = async () => {
  const { data: first } = await request({
    url: `/dmpDosPcm/psmworkorderrule/get/${props.type}`,
    method: "get",
  });
  Object.assign(formData, {
    ...first,
  });

  setTimeout(() => {
    formRef.value.clearValidate();
  }, 0);
};

onMounted(async () => {
  await getData();
});

const formData = reactive<RootObject>({
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  festivalEndTime: "",
  festivalFirstTimeout: 0,
  festivalStartTime: "",
  festivalUpgradeTime: 0,
  id: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  remarks: "",
  restEndDay: 0,
  restEndTime: "",
  restFirstTimeout: 0,
  restStartDay: 0,
  restStartTime: "",
  restUpgradeTime: 0,
  version: 0,
  workEndDay: 0,
  workEndTime: "",
  workFirstTimeout: 0,
  workStartDay: 0,
  workStartTime: "",
  workUpgradeTime: 0,
});
</script>

<style scoped lang="scss">
.el-form--inline .el-form-item {
  margin-right: 10px;
}
.center-txt {
  display: inline-block;
  margin: 10px;
}
.el-divider--horizontal {
  margin: 0px 0 20px;
}
.work-info-p {
  font-weight: 600;
  margin-top: 0;
  color: #666;
}
:deep(
    .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
      > .el-form-item__label:before
  ) {
  display: none;
}
</style>
